
import './Chat.css'
import Nav from '../../components/nav/Nav'
// import { useSelector } from 'react-redux'
import { useState, useRef, useEffect } from 'react';
import ChatList from '../../components/chat-list/ChatList';
import ChatInput from '../../components/chat-input/ChatInput';
import { useSelector, useDispatch } from 'react-redux';


function Chat () {
  //全局状态数据

  // const [messages, setMessages] = useState([]);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  // 监听 messages 数组的变化，一旦 messages 数组有变化，则将滚动条滚动到底部
  useEffect(() => {
    scrollToBottom();
  }, [useSelector(state => state)]);



  return (
    <div >
      <div className='chat-nav'>
        <Nav isindex={false} content={'通信'} />
      </div>
      <div className='chat-lcoal'>
        <ChatList />
        <div ref={messagesEndRef} />
      </div>

      <ChatInput />

      {/* 滚动到底部的区域 */}
     
    </div>

  );

}
export default Chat;